<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HarmonyOS 卡片组件示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <link rel="stylesheet" href="common-styles.css">
</head>
<body>
  <div class="container">
    <h1 class="title title-large">卡片组件示例</h1>
    
    <!-- 基础卡片 -->
    <div class="example-section">
      <h2 class="example-section-title">基础卡片</h2>
      <div class="card-grid">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">卡片标题</h3>
            <p class="card-subtitle">副标题</p>
          </div>
          <div class="card-content">
            <p class="text">这是卡片的内容区域。可以放置任何内容，包括文本、图片等。</p>
          </div>
        </div>
        
        <div class="card clickable">
          <div class="card-header">
            <h3 class="card-title">可点击卡片</h3>
          </div>
          <div class="card-content">
            <p class="text">点击我会有悬停效果</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 卡片尺寸 -->
    <div class="example-section">
      <h2 class="example-section-title">卡片尺寸</h2>
      <div class="card-grid">
        <div class="card card-large">
          <div class="card-header">
            <h3 class="card-title">大卡片</h3>
          </div>
          <div class="card-content">
            <p class="text">大尺寸的卡片，内边距更大</p>
          </div>
        </div>
        
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">默认卡片</h3>
          </div>
          <div class="card-content">
            <p class="text">默认尺寸的卡片</p>
          </div>
        </div>
        
        <div class="card card-small">
          <div class="card-header">
            <h3 class="card-title">小卡片</h3>
          </div>
          <div class="card-content">
            <p class="text">小尺寸的卡片，内边距更小</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 带图片的卡片 -->
    <div class="example-section">
      <h2 class="example-section-title">带图片的卡片</h2>
      <div class="card-grid">
        <div class="card">
          <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Crect fill='%230A59F7' width='400' height='200'/%3E%3Ctext fill='white' font-size='24' x='50%25' y='50%25' text-anchor='middle' dy='.3em'%3E卡片图片%3C/text%3E%3C/svg%3E" 
               alt="Card Image" class="card-image">
          <div class="card-header">
            <h3 class="card-title">带图片的卡片</h3>
          </div>
          <div class="card-content">
            <p class="text">卡片可以包含图片内容</p>
          </div>
        </div>
        
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">带图片的卡片</h3>
          </div>
          <div class="card-content">
            <p class="text">卡片内容区域</p>
          </div>
          <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Crect fill='%2364bb5c' width='400' height='200'/%3E%3Ctext fill='white' font-size='24' x='50%25' y='50%25' text-anchor='middle' dy='.3em'%3E底部图片%3C/text%3E%3C/svg%3E" 
               alt="Card Image" class="card-image">
        </div>
      </div>
    </div>
    
    <!-- 带操作的卡片 -->
    <div class="example-section">
      <h2 class="example-section-title">带操作的卡片</h2>
      <div class="card-grid">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">操作卡片</h3>
            <p class="card-subtitle">带有操作按钮的卡片</p>
          </div>
          <div class="card-content">
            <p class="text">这是卡片的内容，可以在底部添加操作按钮</p>
          </div>
          <div class="card-actions">
            <button class="button button-text">取消</button>
            <button class="button button-primary">确定</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 卡片样式变体 -->
    <div class="example-section">
      <h2 class="example-section-title">卡片样式变体</h2>
      <div class="card-grid">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">默认卡片</h3>
          </div>
          <div class="card-content">
            <p class="text">默认样式的卡片，带有阴影效果</p>
          </div>
        </div>
        
        <div class="card flat">
          <div class="card-header">
            <h3 class="card-title">扁平卡片</h3>
          </div>
          <div class="card-content">
            <p class="text">无阴影的扁平样式卡片</p>
          </div>
        </div>
        
        <div class="card outlined">
          <div class="card-header">
            <h3 class="card-title">轮廓卡片</h3>
          </div>
          <div class="card-content">
            <p class="text">带有边框的轮廓样式卡片</p>
          </div>
        </div>
        
        <div class="card emphasis">
          <div class="card-header">
            <h3 class="card-title">强调卡片</h3>
          </div>
          <div class="card-content">
            <p class="text">带有品牌色背景的强调样式卡片</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

